<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <base href="${base}/"/>
  <title>商品管理</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css"/>
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
  <style>
    .pagination {
      display: flex;
      align-items: center;
      background: #fff;
      padding: 10px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .pagination-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin: 0 5px;
      border-radius: 4px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .pagination-item:hover {
      background-color: #f0f0f0;
      color: #000;
    }

    .pagination-item.active {
      background-color: #007bff;
      color: #fff;
    }

    .pagination-item.dots {
      cursor: default;
    }

    .pagination-item.dots:hover {
      background-color: transparent;
    }

    .pagination-item i {
      font-size: 12px;
    }

    .pagination-item.first-page,
    .pagination-item.last-page {
      width: 35px;
    }

    .pagination-item.prev-page,
    .pagination-item.next-page {
      width: 35px;
    }

    .pagination-item.disabled {
      color: #ccc;
      cursor: not-allowed;
      pointer-events: none;
      background-color: #f5f5f5;
    }

    .pagination-item.disabled:hover {
      background-color: #f5f5f5;
      color: #ccc;
    }

    .pagination-item.disabled i {
      color: #ccc;
    }

    @media (max-width: 768px) {
      .pagination {
        padding: 8px 15px;
      }

      .pagination-item {
        width: 35px;
        height: 35px;
        margin: 0 3px;
        font-size: 13px;
      }
    }
    /* 商品表格样式 */
    .goods_table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    .goods_table th, .goods_table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #e8e8e8;
      vertical-align: middle;
    }

    .goods_table th {
      background-color: #f8f9fa;
      font-weight: 600;
    }

    .goods_table tr:hover {
      background-color: #f8f9fa;
    }

    .goods_img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
    }

    .goods_status {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
    }
    .status_delete{
      background-color: #666666;
      color: #0c5460;
    }

    .status_onsale {
      background-color: #d4edda;
      color: #155724;
    }

    .status_offsale {
      background-color: #fff3cd;
      color: #856404;
    }

    /* 操作按钮 */
    .btn_edit, .btn_offsale, .btn_delete {
      padding: 5px 12px;
      margin: 2px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 12px;
      transition: all 0.3s;
    }

    .btn_edit {
      background-color: #007bff;
      color: white;
    }

    .btn_edit:hover {
      background-color: #0056b3;
    }

    .btn_offsale {
      background-color: #ffc107;
      color: black;
    }

    .btn_offsale:hover {
      background-color: #e0a800;
    }

    .btn_delete {
      background-color: #dc3545;
      color: white;
    }

    .btn_delete:hover {
      background-color: #c82333;
    }

    .goods_intro {
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search_form {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 5px;
    }
  </style>
  <script type="text/javascript">
    function toggleSale(goodsId, sta) {
      const action = sta == 'Y' ? '下架' : '上架';
       const status = sta =='Y' ? 'A' : 'Y'
      if (confirm(`确定要`+ action +`该商品吗？`)) {
        window.location.href = `/shop/admin/goods/updateStatus?id=`+goodsId+`&status=`+status;
      }
    }

    function deleteGoods(goodsId) {
      const status='D'
      if (confirm('确定要永久删除该商品吗？')) {
        window.location.href = `/shop/admin/goods/updateStatus?id=`+goodsId+`&status=`+status;
      }
    }

    function uploadFile() {
      const avatarFile = $('#uploadInput')[0].files[0]; // 修改为与表单中文件输入框的 ID 匹配
      if (!avatarFile) {
        alert("请选择一个文件上传！");
        return;
      }

      let formData = new FormData();
      formData.append("file", avatarFile);
      $.ajax({
        url: "/shop/user/upload",
        method: "post",
        data: formData,
        processData: false,
        contentType: false,
        success: (response) => {
          console.log("response", response);
          // 更新图片预览和隐藏输入框中的图片路径
          $("#showImage").attr("src", response);
          $("#imagePath").val(response); // 将图片路径存储到隐藏输入框中
          // $("#showImage").src(response);
        },
        error: (xhr, status, error) => {
          console.error("上传失败:", error);
          alert("上传失败，请重试！");
        }
      });
    }

    function update(id,no,name,image,marketPrice,salePrice,des,categoryId,stock,hottest,newest,status){
      document.getElementById("id").value=id
      document.getElementById("update").style.display =  "block"
      document.getElementById("overlay").style.display = "block";
      console.log(id,no,name,image,marketPrice,salePrice,des,categoryId,stock,hottest,newest,status)
      console.log(categoryId)
      document.getElementById("no").value=no
      document.getElementById("name").value=name
      document.getElementById("imagePath").value=image
      document.getElementById("showImage").src=image
      document.getElementById("marketPrice").value=marketPrice
      document.getElementById("salePrice").value=salePrice
      document.getElementById("description").value=des
      document.querySelector("select[name='categoryId']").value=categoryId;
      document.getElementById("stock").value=stock
      document.getElementById("hottest").checked=hottest==='Y'
      document.getElementById("newest").checked=newest==='Y'

    }

    function off(){
      document.getElementById("update").style.display =  "none"
      document.getElementById("overlay").style.display = "none";

    }
  </script>
</head>
<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;"></div>
<body>
<div class="container">
  <!-- 头部和左侧菜单保持不变 -->
  <div id="header">
    <div class="logo">
      <a href=""><img src="shop/static/images/admin/logo.png" width="303" height="43" /></a>
    </div>
    <p>
      <a href="/shop/index">退出管理</a> <a href="/shop/admin/">后台首页</a> <a href="/shop/index" target='_blank'>商城首页</a>
      <span>您好 <label class='bold'>${sessionScope.manager.account}</label></span>
    </p>
  </div>

  <div id="admin_left">
    <ul class="submenu">
      <ul class="menu">
        <li><a href="shop/admin/category/add">增加类别</a></li>
        <li><a href="shop/admin/category/list">类别列表</a></li>
        <li><a href="shop/goods/add">增加商品</a></li>
        <li><a href="shop/admin/user/list">用户列表</a></li>
        <li><a href="shop/admin/admin/list">管理员列表</a></li>
        <li><a href="shop/admin/goods/list">商品列表</a></li>


      </ul>
    </ul>
    <div id="copyright"></div>
  </div>


  <div id="admin_right">
    <div class="content_box">
      <div class="content">
        <div class="title">
          <h2>商品列表</h2>
        </div>

        <div class="search_form">
        <form action="/shop/admin/goods/search" method="get">
          <table class="form_table" cellpadding="0" cellspacing="0">
            <tr>
              <th>商品名称：</th>
              <td><input class="normal" name="name" type="text" value="${param.name}"></td>
              <th>分类：</th>
              <td>
                <select name="category">
                  <option value="" >全部</option>
                  <c:forEach items="${categoryList}" var="cat">
                    <option value="${cat.id}" ${param.categoryId eq cat.id ? 'selected' : ''}>
                        ${cat.name}
                    </option>
                  </c:forEach>
                </select>
              </td>
              <th>状态</th>
              <td>
                <select name="status">
                  <option value="">全部</option>
                  <option value="Y">销售中</option>
                  <option value="A">已下架</option>
                  <option value="D">已删除</option>
                </select>
              </td>
              <td>
                <button class="submit" type="submit">
                  <span>搜索</span>
                </button>
              </td>
            </tr>
          </table>
        </form>
      </div>

        <!-- 商品表格 -->
        <table class="goods_table">
          <thead>
          <tr>
            <th>商品图片</th>
            <th>商品名称</th>
            <th>市场价格</th>
            <th>出售价格</th>
            <th>简介</th>
            <th>分类</th>
            <th>库存</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <c:forEach items="${goodsList}" var="goods" varStatus="s" end="4">
            <tr>
              <td>
                <img src="${goods.image}" class="goods_img"
                     alt="${goods.name}">
              </td>
              <td>${goods.name}</td>
              <td>￥${goods.marketPrice}</td>
              <td>￥${goods.salePrice}</td>
              <td class="goods_intro">${goods.description}</td>
<%--              <td>${goods.categoryId}</td>--%>
              <td>
                <c:forEach items="${categoryList}" var="category">
                  <c:if test="${goods.categoryId eq category.id}">
                    ${category.name}
                  </c:if>
                </c:forEach>
              </td>
              <td>${goods.stock}</td>
              <td>
                                    <span class="goods_status ${goods.status == 'Y' ? 'status_onsale' : 'status_offsale'}">
                                        ${goods.status == 'Y' ? '销售中':goods.status =='A' ? '已下架': '已删除'}
                                    </span>
              </td>
              <td>
<%--                <a href="shop/admin/goods/edit?id=${goods.id}"--%>
<%--                   class="btn_edit">修改</a>--%>
            <c:if test="${goods.status!='D'}">
                <button  class="btn_edit" onclick="update(${goods.id},`${goods.no}`,`${goods.name}`,`${goods.image}`,${goods.marketPrice},${goods.salePrice},`${goods.description}`,${goods.categoryId},${goods.stock},`${goods.hottest}`,`${goods.newest}`,`${goods.status}`)">修改</button>
                <a href="javascript:void(0);"
                   onclick="toggleSale(${goods.id}, `${goods.status}`)"
                   class="btn_offsale">
                    ${goods.status == 'Y' ? '下架' : '上架'}
                </a>
                <a href="javascript:void(0);"
                   onclick="deleteGoods(${goods.id})"
                   class="btn_delete">删除</a>
            </c:if>
              </td>
            </tr>
          </c:forEach>
          </tbody>
        </table>

        <c:url var="baseUrl" value="/admin/goods/search">
          <c:param name="name" value="${param.name}"/>
          <c:param name="category" value="${param.category}"/>
          <c:param name="status" value="${param.status}"/>
        </c:url>

        <!-- 分页样式复用用户列表的分页样式 -->
        <div class="pagination-container">
          <div class="pagination">
            <c:forEach begin="1" end="${pageTotal}" var="page">
              <a href="${baseUrl}&page=${page}"
                 class="pagination-item ${currentPage == page ? 'active' : ''}">
                  ${page}
              </a>
            </c:forEach>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="update" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; border: 1px solid #b9b9b9; background: white; padding: 20px; z-index: 1000;">

  <form action="/shop/admin/goods/update" method="post">

    <div id="table_box_1">
      <table class="form_table">
        <colgroup>
          <col width="150px">
          <col>
        </colgroup>
        <tbody>
        <input id="id" name="id" type="hidden">
        <tr>
          <th>商品名称：</th>
          <td><input id="name"  class="normal" name="name" type="text"
                     value=""><label>*</label></td>
        </tr>
        <tr>
          <th>商品编号：</th>
          <td><input id="no" class="normal" name="no" type="text"
                     value=""><label>*</label></td>
        </tr>
        <tr>
          <th>所属分类：</th>
          <td><select name="categoryId">
            <c:forEach items="${categoryList}" var="category">
              <option value="${category.id}">${category.name}</option>
            </c:forEach>

          </select></td>
        </tr>
        <tr>
          <th>基本数据：</th>
          <td>
            <div class="con">
              <table class="border_table">
                <thead id="goodsBaseHead">
                <tr>

                  <th>库存</th>
                  <th>市场价格</th>
                  <th>销售价格</th>
                </tr>
                </thead>
                <tbody id="goodsBaseBody">
                <tr class="td_c">

                  <td><input id="stock" class="tiny" name="stock"
                             type="text"></td>
                  <td><input id="marketPrice" class="tiny" name="marketPrice"
                             type="text"></td>
                  <td><input id="salePrice" class="tiny" name="salePrice"
                             type="text"></td>
                </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>


        <tr>
          <th>缩略图：</th>
          <td>
            <input  type="file"  name="file" id="uploadInput" onchange="uploadFile()"/>
            <input  type="hidden"
                   name="image"
                   id="imagePath"
            />

          </td>
        </tr>
        <tr>
          <%--                                <td >--%>

          <%--                                    图片详情：--%>

          <%--                                </td>--%>
          <th> 图片详情：</th>
          <td>
            <div>
              <img id="showImage" style="height: 120px;width: 120px;">
            </div>
          </td>

        </tr>



        <tr>
          <th>产品描述：</th>
          <td><textarea rows="5" cols="5" name="description" id="description"></textarea></td>
        </tr>
        <tr>
          <th>是否热卖：</th>
          <td><input id="hottest" type="checkbox" name="hottest" value="Y"/></td>
        </tr>
        <tr>
          <th>是否最新：</th>
          <td><input id="newest" type="checkbox" name="newest" value="Y"/></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="margin-top: 10px;margin-left: 80px">
      <button type="submit">确定</button>
      <button type="button" onclick="off()">取消</button>
    </div>
  </form>
</div>
</body>
</html>